<template>
  <div class="vue-video-warp">
    <video
      ref="vueVideoPlayer"
      class="video-js video-js-warp"
      controls
      preload="auto"
      webkit-playsinline="true"
      playsinline="true"
      x5-video-player-type="h5-page"
      data-setup="{}"
      style="width: 100%; height: 100%; object-fit: fill"
    >
      <source id="source" :src="this.videoSrc" type="application/x-mpegURL" />
    </video>
    <slot :video="player"></slot>
  </div>
</template>
<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
  name: "vueVideo",
  props: {
    //是否开启自动播放
    autoplay: {
      type: Boolean,
      default: false,
    },
    //资源路径
    videoSrc: {
      type: String,
      default: "",
      required: true,
    },
    //封面图
    videoPoster: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      player: null,
      playerOptions: {
        playbackRates: [1, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", //将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        errorDisplay: false,
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        sources: [
          {
            type: "application/x-mpegURL",
            src: "", //url地址
          },
        ],
        controls: true,
        // techOrder: ["flash", "html5"],
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
    };
  },
  watch: {
    autoplay: {
      handler: function (o, n) {
        this.playerOptions.autoplay = o;
      },
      immediate: true,
    },
    videoSrc: {
      handler: function (o, n) {
        this.playerOptions.sources[0].src = o;
      },
      immediate: true,
    },
    videoPoster: {
      handler: function (o, n) {
        this.playerOptions.poster = o;
      },
      immediate: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.initVideo();
    }, 500);
  },
  methods: {
    //初始化videojs
    initVideo() {
      const _this = this;
      this.player = videojs(
        this.$refs.vueVideoPlayer,
        this.playerOptions,
        function onPlayerReady() {
          // _this.$nextTick(() => {
          // 	_this.player.play()
          // })
        }
      );
    },

    //暂停
    pauseVideo() {
      this.player.pause();
    },

    //播放
    playVideo() {
      this.player.play();
    },

    //销毁videojs
    disposeVideo() {
      this.player && this.player.dispose();
    },
  },
  beforeDestroy() {
    this.disposeVideo();
  },
};
</script>

<style lang="less">
.vue-video-warp {
  width: 100%;
  height: 100%;

  .vjs-modal-dialog-content {
    display: none;
  }

  .video-js.vjs-fluid {
    padding-top: 0;
  }

  .video-js-warp {
    width: 100%;
    height: 100%;
    background: #000;

    .vjs-big-play-button {
      border-radius: 50%;
      border: 1px solid #fff;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin: -25px;
      outline: none;
    }
  }
}
</style>
